<template>
	<view class="container" :class="data.myvip.expire>0||data.vips.length>0?'wp-expired':''">
		<cu-custom bgColor="bg-yellow" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="head padding-lr vip-pannel padding-top">
			<view class="vip-bg bg-yellow"></view>
			<view class="radius shadow bg-gradual-yellow margin-lr margin-top">
				<view class="cu-list menu-avatar comment user-card">
					<view class="cu-item lg">
						<view class="cu-avatar xl round border" :style="'background-image:url('+userinfo.avatar+');'"></view>
						<view class="content">
							<view class="title">
								<view class="text-cut" style="max-width: 80%;">
									{{userinfo.nickname}}
								</view>
								<image class="png margin-left-sm radius" :class="data.myvip.expired?'vipexpired':''" v-if="data.myvip.logo!=''" :src="data.myvip.logo" mode="aspectFit"></image>
							</view>
							<view class="text-muted text-sm text-content">
								ID:{{userinfo.uid}}
							</view>
						</view>
					</view>
				</view>
				<view class="padding padding-top-xs text-center">
					<text class="text-xxl text-black text-bold">{{data.myvip.name}}</text>
					<view v-if="data.myvip.isvip" class="padding-top-sm" @click="tabVip(data.myvip)">
						<text v-if="data.myvip.expired" class="text-brown">已到期</text>
						<text v-else class="text-brown">{{data.myvip.expiredate}}</text>
						<text v-if="data.myvip.expire>0" class="text-blue margin-left-sm">{{data.myvip.expired?'续费':'延期'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-lr vip-privilege" v-if="data.myvip.isvip">
			<view class="cu-bar bg-white margin-top-sm">
				<view class="action">
					<text class="text-bold text-xl text-black text-tagtitle">当前会员专享特权</text>
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<image src="@/static/images/img_vip.png" class="png" mode="aspectFit"></image>
						<text class="text-lg">{{data.myvip.name}}全场<text class="text-red text-bold">{{data.myvip.discount}}折</text>优惠(商城类除外)</text>
					</view>
				</view>
				<view class="cu-item" v-if="data.myvip.rebate>0">
					<view class="content">
						<image src="@/static/images/img_vip.png" class="png" mode="aspectFit"></image>
						<text class="text-lg">开通{{data.myvip.name}}一次性赠送<text class="text-red text-bold">{{data.myvip.rebate}}</text>积分</text>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-lr solid-top" v-if="data.vips.length>0">
			<view class="cu-bar bg-white margin-top-sm">
				<view class="action">
					<text class="text-bold text-xl text-black text-tagtitle">更多会员等级推荐</text>
				</view>
			</view>
			<view class="content-nav noaf bg-white">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
					<view class="cu-item" @click="currview=index" :class="currview==index?'cur':''" v-for="(vip, index) in data.vips" :key="index">
						{{vip.name}}
					</view>
				</scroll-view>
			</view>
			<view class="cu-list menu card-menu bg-orange shadow light">
				<view class="cu-item nobg">
					<view class="content">
						<image :src="data.vips[currview].logo" class="png radius" mode="aspectFit"></image>
						<text class="text-lg">{{data.vips[currview].name}}专享<text class="text-red text-bold">{{data.vips[currview].discount}}折</text>优惠(商城类除外)</text>
					</view>
				</view>
				<view class="cu-item nobg" v-if="data.vips[currview].rebate>0">
					<view class="content">
						<image :src="data.vips[currview].logo" class="png radius" mode="aspectFit"></image>
						<text class="text-lg">开通{{data.vips[currview].name}}一次性赠送<text class="text-red text-bold">{{data.vips[currview].rebate}}</text>积分</text>
					</view>
				</view>
			</view>
		</view>
		<view class="text-center text-gray" v-else>
			<text class="text-empty">暂无可升级的等级</text>
		</view>
		<view class="cu-bar tabbar noshadow foot" v-if="data.myvip.expire>0||data.vips.length>0">
			<view class="btn-group margin-bottom-sm">
				<button class="cu-btn bg-red round shadow-blur lg" @click="tabVip(data.vips[currview])" v-if="data.vips.length>0">立即升级(￥{{data.vips[currview].price}})</button>
				<button @click="tabVip(data.myvip)" class="cu-btn bg-orange round shadow-blur lg" v-if="data.myvip.isvip">
					<text>立即{{data.myvip.expired?'续费':'延期'}}(￥{{data.myvip.price}})</text>
				</button>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="showmodal=='buyvip'?'show':''" v-if="!data.hasbought">
			<view class="modal-bg" @click="showmodal=''"></view>
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="showmodal=''">取消</view>
					<view class="action text-green" @tap="upgradeVip">确定</view>
				</view>
				<view class="grid col-2 padding-sm">
					<view class="padding-xs" v-for="(item, index) in 4" :key="index">
						<button @click="cycle=item" class="cu-btn orange lg block" :class="cycle==item?'bg-orange':'line-orange'"> {{currvip.price*item}}元/{{currvip.expire*item}}天</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	
	export default {
		data() {
			return {
				userinfo:{
					uid:0,
					vid:0,
					vipname:''
				},
				cycle:1,
				showmodal:'',
				currview:0,
				currvip:{
					id:0,
					price:0,
					expire:0
				},
				data:{
					title:"开通会员",
					vips:[],
					myvip:{
						id:0,
						name:"",
						discount:"",
						logo:"",
						expire:0,
						rebate:0,
						expired:false,
						isvip:false,
						expiredate:"长期有效"
					}
				}
			}
		},
		onLoad() {
			if(core.userinfo.uid==0) return core.toast('请先登录','login');
			this.userinfo = core.userinfo;
			this.initData('member/vip');
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			tabVip(vip){
				this.currvip = vip;
				if(vip.expire==0){
					this.cycle = 1;
					return this.upgradeVip();
				}
				this.showmodal = 'buyvip';
			},
			upgradeVip(){
				let postdata = {vid:this.currvip.id,cycle:this.cycle};
				return core.post('member/upvip',function(res){
					core.report(res);
				},postdata);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			unSupport(){
				return core.toast('敬请期待');
			}
		}
	}
</script>

<style>
	page{padding-bottom: 100upx;}
	.wp-expired{padding-bottom: 100upx;}
	.vip-pannel{position: relative;}
	.vip-pannel .vip-bg{position: absolute; left: 0; top: 0; width: 100%; height: 80%;}
	.vip-pannel>.shadow{background-image: url(@/static/images/bg_top_mine.png); background-size: 100% auto; background-repeat: no-repeat; position: relative;}
	.vip-pannel .cu-item .content .title .png{height: 40upx; vertical-align: middle; display: inline-block; width: 46upx;}
	.vip-privilege .cu-item .content{line-height: 50upx;}
</style>
